<template>
	<el-card class="box-card">
		<el-steps :active="2" align-center>
		  <el-step title="基础信息"></el-step>
		  <el-step title="活动图片"></el-step>
		  <el-step title="活动时间"></el-step>
		  <el-step title="活动简介"></el-step>
		  <el-step title="补充说明"></el-step>
		  <el-step title="免费体验"></el-step>
		</el-steps>
		<el-row class="box-row">
			<el-form :model="formData" ref="formData">
				<el-form-item class="title">
					<el-col :span="24">活动时间</el-col>
				</el-form-item>
				<el-form-item>
					<el-switch v-model="formData.naturalDay" active-text="星期" inactive-text="自然日" @change="dateTypeChange"></el-switch>
				</el-form-item>
				<el-form-item  v-show="!formData.naturalDay">
					<el-date-picker v-model="formData.startTime" type="date" placeholder="售卖开始时间" style="width:50%"></el-date-picker>
				</el-form-item>
				<el-form-item prop="" v-show="!formData.naturalDay">
					<el-date-picker v-model="formData.endTime" type="date" placeholder="售卖结束时间" style="width:50%"></el-date-picker>
				</el-form-item>
				<el-form-item prop="" v-show="formData.naturalDay">
				    <el-checkbox-group v-model="formData.date" size="medium">
				        <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
				    </el-checkbox-group>
				</el-form-item>
				<el-form-item v-for="(domain, index) in domains" :key="domain.key" >
					<el-date-picker v-model="domain.startTime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="活动开始时间" style="width:25%;margin-left: 28px;"></el-date-picker>
					<el-input v-model="domain.courseDuration" placeholder="活动时长,分钟数"  style="width:25%;"></el-input>
					<i class="el-icon-delete iconClass" @click.prevent="removeDomain(domain)" v-if="index != 0"></i>
					<i @click="addDomain(domain)" class="el-icon-circle-plus iconClass" v-if="index == 0"></i>
					<div style="margin-top: 10px;">
						<el-input v-model="domain.maxBabys" placeholder="名额"  style="width:25%;"></el-input>
						<el-input v-model="domain.coursePoint" placeholder="价格,遛点"  style="width:25%;"></el-input>
					</div>
				</el-form-item>
			</el-form>
			
			<el-button type="primary" style="width:50%;margin-top: 10px;" @click="submitForm('formData')">下一步</el-button>
		</el-row>
	</el-card>
</template>

<script>
	import { courseUpdate,courseInfo } from '@/api/getData'
	import dtime from 'time-formater'
	export default {
		data() {
			return {
				formData: {
					id: "",
					currentStep:"3",
					startTime:"",
					endTime:"",
					date:[],
					weekDays:"",
					isNaturalDay:0,
					naturalDay:false,
					courseTimes:[],
				},
				cities:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],
				domains: [{
					startTime:"",
					coursePoint:"",
					maxBabys:"",
					courseDuration:"",
				}],
			}
		},
		mounted() {
			this.formData.id = this.$route.query.id;
			if(this.formData.id != undefined && this.formData.id != ""){
				this.courseInfo(this.formData.id);
			}
		},
		methods: {
			async courseInfo(id) {
				const res = await courseInfo({
					id: id,
				});
				if(res.code == "0") {
					this.formData.isNaturalDay = res.obj.isNaturalDay;
					if(this.formData.isNaturalDay == 1){//星期
						this.formData.naturalDay = true;
						this.formData.weekDays = res.obj.weekDays;
						if(this.formData.weekDays != null){
							this.formData.date = this.formData.weekDays.split(",");
						}
					}else{
						this.formData.naturalDay = false;
						this.formData.startTime = res.obj.startTime;
						this.formData.endTime = res.obj.endTime;
					}
					this.formData.courseTimes = res.obj.courseTimes;
					if(this.formData.courseTimes.length > 0){
						this.domains = this.formData.courseTimes;
					}
				} else {
					this.$notify.error({
						title: '错误',
						message: res.msg,
						offset: 100
					});
				}
			},
			dateTypeChange:function(value){
				
			},
			removeDomain(item) {
				var index = this.domains.indexOf(item)
				if(index !== -1) {
					this.domains.splice(index, 1);
				}
			},
			addDomain(obj) {
				if(this.checkDemain(obj)){
					this.domains.push({
						startTime:"",
						coursePoint:"",
						maxBabys:"",
						courseDuration:"",
						key: Date.now()
					});
				}
			},
			async submitForm(formName) {
				this.$refs[formName].validate(async(valid) => {
					if(valid) {
						if(this.formData.naturalDay){
							this.formData.isNaturalDay = 1;
						}else{
							this.formData.isNaturalDay = 0;
						}
						//星期赋值
						if(this.formData.date.length > 0){
							this.formData.weekDays = this.formData.date.join(",")
						}
						let _this = this;
						let isDomain = false;
						this.domains.forEach(function(item){
							if(_this.checkDemain(item)){
								if(item.startTime != "" && typeof item.startTime != 'string'){
									item.startTime = dtime(item.startTime.getTime()).format('YYYY-MM-DD HH:mm')
								}
							}else{
								isDomain = true;
								return false;
							}
							
						})
						//验证没通过
						if(isDomain){
							return false;
						}
						this.formData.courseTimes = this.domains;
						
						if(this.formData.startTime != null && this.formData.startTime != "" && typeof this.formData.startTime != 'string'){
							this.formData.startTime = dtime(this.formData.startTime.getTime()).format('YYYY-MM-DD')
						}
						if(this.formData.endTime != null && this.formData.endTime != "" && typeof this.formData.endTime != 'string'){
							this.formData.endTime = dtime(this.formData.endTime.getTime()).format('YYYY-MM-DD')
						}
						let res = await courseUpdate(this.formData);

						if(res.code == "0") {
							this.$router.push({
								path: 'activityFour',
								query: {
									id: this.formData.id,
									businessId:this.$route.query.businessId
								}
							})
						} else {
							this.$notify.error({
								title: '错误',
								message: res.msg,
								offset: 100
							});
						}
					}
				});
			},
			checkDemain(obj){
				if(obj.startTime == ""){
					this.$notify.error({
						title: '提示',
						message: "请输入活动开始时间",
						offset: 100
					});
					return false;
				}
				if(obj.coursePoint == ""){
					this.$notify.error({
						title: '提示',
						message: "请输入遛点",
						offset: 100
					});
					return false;
				}
				if(obj.maxBabys == ""){
					this.$notify.error({
						title: '提示',
						message: "请输入名额",
						offset: 100
					});
					return false;
				}
				if(obj.courseDuration == ""){
					this.$notify.error({
						title: '提示',
						message: "请输入活动时长",
						offset: 100
					});
					return false;
				}
				return true;
			}
		},
	}
</script>

<style scoped>
	.box-card {
		margin: 0 10px;
	}
	
	.title {
		background-color: #20a0ff;
		line-height: 60px;
		font-size: 18px;
		color: #fff;
		width: 50%;
		margin: 10px auto;
	}
	
	.box-row {
		margin: 20px auto;
		width: 100%;
		text-align: center;
	}
	.iconClass{
		font-size: 24px;
		color:#66b1ff;
	}
</style>